<template>
  <div class="app-container">
    <Sidebar
      :title="appName"
      :menu-items="menuItems"
      @toggle="toggle"
      @toggleSide="toggleSide"
    />
    <main class="main-content" :class="{ 'content-expanded': !isCollapsed }">
      <Repl
        v-if="render"
        ref="repl"
        :store="store"
        :theme="theme.value"
        :previewTheme="previewTheme.value"
        :editor="MonacoEditor"
        :ssr="true"
        :sfcOptions="{
          script: {
            // inlineTemplate: false
          },
        }"
      />
    </main>
    <div class="tool-container">
      <Like />
      <Notice />
      <Money />
      <Advice />
    </div>
  </div>
</template>

<script setup>
import { ref, useTemplateRef, nextTick, onMounted } from 'vue';
import Sidebar from '../src/components/sidebar/index.vue';
import Like from '../src/components/like/index.vue';
import Notice from '../src/components/notice/index.vue';
import Money from '../src/components/money/index.vue';
import Advice from '../src/components/advice/index.vue';
import { Repl, useStore, useVueImportMap } from '../src';
import MonacoEditor from '../src/editor/MonacoEditor.vue';
import {
  File
} from '../src/store.ts';
import introduceCode from './maps/introduce/index.vue?raw';
import heatmapCode from './maps/heatmap/index.vue?raw';
import mapTypeCode from './maps/mapType/index.vue?raw';
import paintCode from './maps/paint/index.vue?raw';
import infoWindowCode from './maps/infoWindow/index.vue?raw';
import trackPlayBackCode from './maps/trackPlayBack/index.vue?raw';
import measureDistanceCode from './maps/measureDistance/index.vue?raw';
import measureAreaCode from './maps/measureArea/index.vue?raw';
import initFeatureCode from './maps/initFeature/index.vue?raw';
import featureEventCode from './maps/featureEvent/index.vue?raw';
import featureSettopCode from './maps/featureSettop/index.vue?raw';
import initClusterCode from './maps/initCluster/index.vue?raw';
import clusterTrackCode from './maps/clusterTrack/index.vue?raw';

const query = new URLSearchParams(location.search)
const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
  runtimeDev: import.meta.env.PROD
    ? undefined
    : `${location.origin}/src/vue-dev-proxy`,
  serverRenderer: import.meta.env.PROD
    ? undefined
    : `${location.origin}/src/vue-server-renderer-dev-proxy`,
})
const store = (window.store = useStore(
  {
    builtinImportMap,
    vueVersion,
    showOutput: ref(query.has('so')),
    outputMode: ref('preview'),
  },
  location.hash,
))
const repl = useTemplateRef('repl');
const render = ref(false);
// watchEffect(() => history.replaceState({}, '', store.serialize()))

const theme = ref<'light' | 'dark'>('dark')
window.theme = theme
const previewTheme = ref(false)
window.previewTheme = previewTheme

const appName = ref('WMap 地图文档');
const menuItems = ref([
  {
    path: '/introduce',
    title: '介绍',
    fileName: 'introduce.vue',
    code: introduceCode
  },
  {
    path: '/heatmap',
    title: '热力图',
    fileName: 'heatmap.vue',
    code: heatmapCode
  },
  {
    path: '/initCluster',
    title: '初始化聚合',
    fileName: 'initCluster.vue',
    code: initClusterCode
  },
  {
    path: '/clusterTrack',
    title: '聚合追踪',
    fileName: 'clusterTrack.vue',
    code: clusterTrackCode
  },
  {
    path: '/initFeature',
    title: '初始化覆盖物',
    fileName: 'initFeature.vue',
    code: initFeatureCode
  },
  {
    path: '/featureEvent',
    title: '覆盖物事件',
    fileName: 'featureEvent.vue',
    code: featureEventCode
  },
  {
    path: '/featureSettop',
    title: '覆盖物置顶',
    fileName: 'featureSettop.vue',
    code: featureSettopCode
  },
  {
    path: '/mapType',
    title: '底图切换',
    fileName: 'mapType.vue',
    code: mapTypeCode
  },
  {
    path: '/paint',
    title: '图形绘制',
    fileName: 'paint.vue',
    code: paintCode
  },
  {
    path: '/infoWindow',
    title: '信息弹框',
    fileName: 'infoWindow.vue',
    code: infoWindowCode
  },
  {
    path: '/trackPlayBack',
    title: '轨迹回放',
    fileName: 'trackPlayBack.vue',
    code: trackPlayBackCode
  },
  {
    path: '/measureDistance',
    title: '测距离',
    fileName: 'measureDistance.vue',
    code: measureDistanceCode
  },
  {
    path: '/measureArea',
    title: '测面积',
    fileName: 'measureArea.vue',
    code: measureAreaCode
  }
]);

const files = {}
menuItems.value.forEach(item => {
  files[item.fileName] = item.code
})
store.setFiles(files, 'introduce.vue')
render.value = true
// 如果你需要在父组件中控制侧边栏状态
const isCollapsed = ref(true);
const toggle = (status) => {
  isCollapsed.value = status;
}
const toggleSide = side => {
  render.value = false;
  // store.setActive('src/' + side.fileName);
  nextTick(() => {
    render.value = true
    store.setFiles(files, side.fileName)
  })
  // repl.value.reload();
}
const sendSee = async() => {
  if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') return;
	await fetch('http://1.95.157.217/api/map/sendSee', {
		method: 'POST',
    body: JSON.stringify({
      page_from: 'mapDoc'
    }),
    headers: {
      'Content-Type': 'application/json'
    }
	})
}
onMounted(() => {
  sendSee();
})
</script>

<style>
.app-container {
  display: flex;
  width: 100%;
  height: 100%;
}
.tool-container {
  position: fixed;
  right: 0;
  top: 0;
  display: flex;
  z-index: 1;
}
.main-content {
  margin-left: 250px;
  /* padding: 20px; */
  width: calc(100% - 250px);
  transition: margin-left 0.3s ease;
}

.content-expanded {
  margin-left: 60px;
  width: calc(100% - 60px);
}

/* 响应式设计 - 在移动设备上隐藏侧边栏 */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.sidebar-collapsed {
    transform: translateX(-100%);
  }
  
  .main-content {
    margin-left: 0;
    width: 100%;
  }
}
</style>
